import React from 'react'
import './hootFloor.css'
import ArrowTabs from '../ArrowTabs/ArrowTabs'
import SwiperCart from '../SwiperCart/SwiperCart';
import SwiperIndex from '../SwiperCart/CartChildren/SwiperIndex/SwiperIndex';

let tabsList = [
  { type: "1", title: "精选推荐" },
  { type: "2", title: "热点关注" },
  { type: "3", title: "儿童节" },
  { type: "4", title: "高考加油" },
  { type: "5", title: "端午节" },
  { type: "6", title: "618" },
  { type: "7", title: "父亲节" },
  { type: "8", title: "毕业季" },
];


function HootFloor(props) {
  let {Listlength} = props;
  return (
    // <ArrowTabs DataListLength={5} DomWidth={208}>
    <div style={{ width: '100%', height: '100%', position: 'relative' }}>
      <div>
        <div className='mall-hotFloor-header'>
          <h2 className='mall-hotFloor-header__title'>今日推荐</h2>
          <div className='mall-hotFloor-header__max-banner'>开通会员免费使用</div>
          <div className='mall-hotFloor-tabsArea'>
            <div className='mall-hotFloor-tabs'>
              {
                tabsList.map((item, index) => {
                  return <div className='mall-hotFloor-tabs-item' key={index}>{item.title}</div>
                })
              }
            </div>

            <a href="" className='mall-hotFloor-header__findMore'>查看更多 &gt;</a>
          </div>
        </div>

        <div className='hot-container'>
          {/* 设置左右箭头 */}
          <ArrowTabs DataListLength={Listlength} DomWidth={208}>
            {/* ------返回 Children 渲染数据----- */}
            {
              React.Children.map(props.children, (child, index) => {
                return child;
              })
            }
          </ArrowTabs>
        </div>
      </div>

    </div>
    // </ArrowTabs>
  )
}

export default HootFloor;
